<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <div class="title">
          <img src="@/assets/icons/用户信息.png" alt="userInfo" class="icon">
          <span>用户信息</span>
        </div>
      </el-col>
    </el-row>

    <div class="top">
      <el-select v-model="status" @change="changeStatus($event)">
        <el-option
          v-for="item in userStatus"
          :key="item.label"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="用户工号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户所属部门" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.deptname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户邮箱" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email ? scope.row.email : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户电话号码" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.tel ? scope.row.tel : '无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户权限" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.permission ? scope.row.permission : scope.row.dept.permission }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="人脸缩略图" align="center">
        <template slot-scope="scope">
          <img src="" alt="">
          <span>{{ scope.row.faceuri }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="150px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" style="width: 6em;" @click="handleUpdate(scope.$index,scope.row)">编辑</el-button>
          <el-button :disabled="scope.row.isE ? false : true" size="mini" style="width: 6em;" type="success" @click="handlePass(scope.$index,scope.row)">{{ `${scope.row.isE ? '' : '已'}启用` }}</el-button>
          <el-button :disabled="scope.row.isD ? false : true" size="mini" style="width: 6em;" type="danger" @click="handleDelete(scope.$index,scope.row)">{{ `${scope.row.isD ? '' : '已'}禁用` }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>

    <el-dialog :visible.sync="dialogFormVisible" append-to-body title="修改">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 450px; margin-left:50px;">
        <el-form-item label="用户姓名">
          <el-input v-model="temp.name" />
        </el-form-item>
        <el-form-item label="用户所属部门">
          <el-select v-model="temp.dept" placeholder="">
            <el-option v-for="item in depts" :key="item.id" :value="item.id" :label="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input v-model="temp.email" />
        </el-form-item>
        <el-form-item label="用户电话号码">
          <el-input v-model="temp.tel" />
        </el-form-item>
        <el-form-item prop="password" label="用户密码">
          <el-input v-model="temp.password" type="password" @blur="validPass" />
        </el-form-item>
        <el-form-item label="用户权限">
          <el-input v-model="temp.permission" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="updateData">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { findUser, updateUser, deleteUser, enableUser } from '@/api/user'
import { findAllDept } from '@/api/dept'
import waves from '@/directive/waves' // 水波纹指令

export default {
  name: 'UInfoTable',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: [],
      total: 0,
      page: 1,
      size: 20,
      listLoading: true,
      listQuery: {
        query: undefined
      },
      temp: {
        id: '',
        name: '',
        dept: '',
        email: '',
        tel: '',
        faceuri: ''
      },
      depts: [],
      searchBy: ['会议室编号', '会议室大小'],
      search: '',
      tip: '',
      dialogFormVisible: false,
      rules: {
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'change'
        }]
      },
      status: 1,
      userStatus: [
        {
          value: -1,
          label: '待审核的用户'
        },
        {
          value: 0,
          label: '审核已通过的用户'
        },
        {
          value: 1,
          label: '所有用户'
        }
      ]
    }
  },
  created() {
    this.getList()
    this.getDepts()
  },
  methods: {
    validPass() {
      if (this.temp.password) {
        this.$refs['dataForm'].clearValidate()
      }
    },
    changeStatus(status) {
      this.page = 1
      this.getList()
    },
    async getDepts() {
      const res = await findAllDept()
      this.depts = res.data.data
    },
    async getList() {
      this.listLoading = true
      const res = await findUser(this.status, this.page - 1, this.size)
      this.list = res.data.data.content
      this.total = res.data.data.totalElements
      if (this.list) {
        this.list.forEach(element => {
          if (element.dept) {
            element.deptname = element.dept.name
          }
          element.password = ''
          element.isE = element.enabled === -1 || element.enabled === -2
          element.isD = element.enabled === -1 || element.enabled === 0
        })
      }
      setTimeout(() => {
        this.listLoading = false
      }, 0.7 * 1000)
    },
    handleFilter() {
      this.getList()
    },
    switchTip() {
      const s = '请输入'
      switch (this.search) {
        case '会议室编号' :
          this.tip = `${s}会议室编号`
          break
        case '会议室大小' :
          this.tip = `${s}会议室大小`
          break
        default:
          this.tip = ''
          break
      }
    },
    handleUpdate(index, row) {
      this.temp.id = row.id
      this.temp.name = row.name
      row.dept ? this.temp.dept = row.dept.id : ''
      this.temp.email = row.email
      this.temp.tel = row.tel
      this.temp.password = row.password
      this.temp.faceuri = row.faceuri
      this.temp.permission = row.permission || row.dept.permission
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validateField('password', (valid) => {
        if (valid) {
          if (this.temp.password) {
            const user = Object.assign({}, this.temp)
            updateUser(user).then(res => {
              if (res.data.code === 0) {
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              }
            })
          } else {
            //
          }
        }
      })
      // this.$refs['dataForm'].validate()
    },
    handleDelete(index, row) {
      deleteUser(row.id).then(res => {
        if (!res.data.code) {
          this.$notify({
            title: '成功',
            message: '禁用成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })
    },
    handlePass(index, row) {
      enableUser(row.id).then(res => {
        if (!res.data.code) {
          this.$notify({
            title: '成功',
            message: '启用成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        }
      })
    },
    handleSizeChange(val) {
      this.size = val
      this.page = 1
      this.getList(this.status)
    },
    handleCurrentChange(val) {
      this.page = val
      this.getList(this.status)
    }
  }
}

</script>

<style scoped>
.top {
  float: right;
  padding-bottom: 20px;
}

.pagination-container {
  background: #fff;
  padding: 32px 16px;
}

.pagination-container.hidden {
  display: none;
}
</style>

